<template>
<view class="body">
  <view class="selectAddress flex a-item j-content" @tap="getaddress">点击选择地址</view>
  <view class="iptBox flex flex-row">
    <view class="label flex a-item">地址:</view><input @change="update" placeholder="请选择地址" v-model="address.address" />
  </view>
  <view class="iptBox flex flex-row">
    <view class="label flex  a-item">联系人:</view><input @change="update" placeholder="请输入联系人" v-model="address.user" />
  </view>
  <view class="iptBox flex flex-row">
    <view class="label flex  a-item">联系电话:</view>
    <input placeholder="请输入联系方式" @change="update" v-model="address.phone" />
  </view>
  <view class="bottom confirm flex a-item j-content" @tap="submit">
    确认
  </view>
</view>
</template>

<script>
export default {
  name: "selectAddress",
  props:{
    address:{}
  },
  data(){
    return{

    }
  },
  created() {
  },
  methods:{
    getaddress() {
      let that = this
      uni.chooseLocation({
        success: function(res) {
          that.address.address = res.address
          that.address.location = `${res.latitude},${res.longitude}`
          that.update()
        },
        fail:function (e) {
          console.log(e)
        }
      });
    },
    submit(){
      this.$emit('close')
    },
    update(){
      this.$emit('update:address',this.address)
    },
  }

}
</script>

<style lang="scss" scoped>
.body{
  background: #ffffff;
  width: 750rpx;
  height: 600rpx;
  padding: 30rpx 10rpx 10rpx 20rpx;
  font-family: PingFang SC;
  .iptBox{
    height: 100rpx;
    .label{
      font-size: 35rpx;
      width: 200rpx;
    }
    input{
      border-bottom: #EDEDED 1px solid;
      width: 100%;
      height: 100%;
      font-size: 32rpx;
    }
  }
}
.selectAddress{
  border: #FFCDCA 1px solid;
  width: 100%;
  color: #FF212A;
  height: 80rpx;
  font-size: 35rpx;
  border-radius: 5rpx;
  &:after{
    content: ">";
  }
}
.confirm{
  width: 730rpx;
  background: red;
  color:#ffffff;
  position: absolute;
  height: 120rpx;
  border-radius: 120rpx;
  font-size: 40rpx;
}
</style>
